<template>
  <div class="tree-wrap">
    <div v-loading="loading" class="el-table">
      <tr class="container-tr">
        <th v-for="(item, k) in treeColumn" :key="k" class="p-th is-leaf">
          <div class="cell">{{ item.label }}</div>
        </th>
      </tr>
      <div class="card-billmaterials-scroll">
        <el-tree
          ref="elTree"
          class="tree"
          :data="treeData"
          :default-expanded-keys="defaultShowNodes"
          draggable
          lazy
          v-bind="$attrs"
          v-on="$listeners"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span class="sp-val">
              <el-dropdown
                placement="bottom"
                size="mini"
                trigger="hover"
                @command="handleDropdown($event, data)"
                @visible-change="dropdownVisibleChange"
              >
                <span class="el-dropdown-link">
                  <i class="iconfont iconicon_more mr-2"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="min-width: 80px;">
                  <el-dropdown-item
                    v-for="(subItem, s_k) in dropdownList"
                    :key="s_k"
                    :command="subItem.value"
                    class="dropdown-item"
                    @mouseenter.native="onMouseHover(s_k, true)"
                    @mouseleave.native="onMouseHover(s_k, false)"
                  >
                    {{ subItem.label }}
                    <i v-if="subItem.children" class="el-icon-arrow-right icon"></i>
                    <template v-if="subItem.children && subItem.visible">
                      <ul class="download-right" style="min-width: 70px;">
                        <li
                          v-for="(childItem, c_k) in subItem.children"
                          :key="c_k"
                          class="el-dropdown-menu__item"
                          @click="handleDropdown(childItem.value, row)"
                        >{{ childItem.label }}</li>
                      </ul>
                    </template>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <i
                class="iconfont"
                :class="!data.hasChild ? 'iconicon_folder': 'iconicon_file'"
              ></i>
              <span class="sp-label">{{ node.label }}</span>
            </span>
            <span class="sp-val">{{ data.desc || data.description }}</span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    dropdownList: {
      type: Array,
      default: () => []
    },
    treeData: {
      type: Array,
      default: () => []
    },
    treeColumn: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      studentTree: [], // 我的树结构数据
      defaultShowNodes: [] // 这里存放要默认展开的节点 i
    }
  },
  mounted() {},
  methods: {
    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = false
      this.defaultShowNodes.some(item => {
        if (item === data.id) { // 判断当前节点是否存在， 存在不做处理
          flag = true
          return true
        }
      })
      if (!flag) { // 不存在则存到数组里
        this.defaultShowNodes.push(data.id)
      }
    },
    // 树节点关闭
    handleNodeCollapse(data) {
      this.defaultShowNodes.some((item, i) => {
        if (item === data.id) {
          // 删除关闭节点
          this.defaultShowNodes.length = i
        }
      })
    },
    handleDropdown(type, row) {
      this.$emit('handleDropdown', type, row)
    },
    dropdownVisibleChange(flag) {
      if (!flag) {
        const dropdownList = this.dropdownList
        dropdownList.forEach((item, index) => {
          item.visible = false
        })
        this.dropdownList = dropdownList
      }
    },
    onMouseHover(k, type) {
      if (type) {
        this.dropdownList[k].visible = true
      } else {
        this.dropdownList[k].visible = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/frontPage/page/materials.scss";
.tree-wrap {
  .container-tr {
    display: grid;
    grid-template-columns: auto 230px;
    .p-th {
      background-color: #f8f9fa !important;
      line-height: 34px;
      margin: 0;
      padding: 0;
    }
  }
  .tree {
    max-height: calc(100vh - 310px);
  }
}
.custom-tree-node {
  flex: 1;
  padding-right: 8px;
  display: grid;
  grid-template-columns: auto 210px;
  align-items: center;
  .sp-val {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    &:nth-child(1) {
      padding-left: 0px;
    }
    .sp-label {
      padding-left: 6px;
    }
  }
}
::v-deep .el-tree-node__content {
  height: 40px;
  border-bottom: 1px solid #eff2f7 !important;
}
::v-deep .el-tree .is-drop-inner {
  border: 1px dashed #556ee6;
}
// ::v-deep .el-tree__drop-indicator {
//   height: 2px;
// }
.iconicon_folder {
  color: #dab46a;
}
.dropdown-item {
  position: relative;
  .download-right {
    padding: 8px 0 !important;
    position: absolute;
    top: -8px;
    right: -80px;
    width: 80px;
    height: auto;
    background-color: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0px 0px 4px 0px rgba(18, 38, 63, 0.17) !important;
  }
  .el-dropdown-menu__item:not(.is-disabled):hover,
  .el-dropdown-menu__item:focus {
    color: #556ee6 !important;
    background-color: #f2f4ff !important;
  }
}
</style>
